<!DOCTYPE html>
<html data-ng-app="urbsourceLogin">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>UrbSource</title>
<!-- RESOURCES -->

<!-- JS -->
<script src="resources/login/jquery-1.11.1.js"></script>
<script src="resources/login/angular.js"></script>
<script src="resources/login/angucomplete.js"></script>
<script src="resources/js/toastr.js"></script>
<!--  CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
	href="resources/css/angucomplete.css">
<link rel="stylesheet" type="text/css"
	href="/UrbSource/resources/css/urbSource.css">
<link rel="stylesheet" type="text/css"
	href="resources/css/toastr.css">
	
<script>

    $(document).ready(function() {
    	toastr.options = {
    			  "closeButton": false,
    			  "debug": false,
    			  "positionClass": "toast-bottom-right",
    			  "onclick": null,
    			  "showDuration": "3000",
    			  "hideDuration": "10000",
    			  "timeOut": "50000",
    			  "extendedTimeOut": "10000",
    			  "showEasing": "swing",
    			  "hideEasing": "linear",
    			  "showMethod": "fadeIn",
    			  "hideMethod": "fadeOut"
    			};
    	toastr.success("Welcome to UrbSource!", "UrbSource Developer Team");

    });

</script>
<!-- APP -->
<script src="app/login/app.js"></script>
<script src="app/login/util/AngucompleteService.js"></script>
<!-- MAIN PAGE -->
<script src="app/login/mainPage/js/directives.js"></script>
<script src="app/login/mainPage/js/controllers.js"></script>
<script src="app/login/mainPage/mainPanel/controllers.js"></script>
<script src="app/login/mainPage/searchPanel/controllers.js"></script>
<script src="app/login/mainPage/searchPanel/services.js"></script>

    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      .controls {
        margin-top: 16px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #pac-input {
        background-color: #fff;
        padding: 0 11px 0 13px;
        width: 400px;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        text-overflow: ellipsis;
      }

      #pac-input:focus {
        border-color: #4d90fe;
        margin-left: -1px;
        padding-left: 14px;  /* Regular padding-left + 1. */
        width: 401px;
      }

      .pac-container {
        font-family: Roboto;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }
}

    </style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>

function initialize() { 
  var markers = [];
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
	zoom: 11,
	center: new google.maps.LatLng(41.018990, 29.001056),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(40.793827, 28.301845),
      new google.maps.LatLng(41.285832, 29.838557));
 

  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));

  // [START region_getplaces]
  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.
      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      });

      markers.push(marker);

      bounds.extend(place.geometry.location);
    }

    map.fitBounds(bounds);
  });
  // [END region_getplaces]

  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
 <style>
      #target {
        width: 345px;
      }
    </style>
</head>
<body>
	<div style="width:100%;height:40px;background-color:#d5d5d5" class="top"> </div>
	<div class="containSearchLogin" ng-controller="URLCtrlLogin">
	
		<us-search-panel></us-search-panel>
		<us-login-user-panel></us-login-user-panel>
	</div>
	<us-main-panel></us-main-panel>
</body>
</html>
